<?php
    $baseUrl= base_url();
?>
<html>
<head>
<title>Vevive</title>
<!--[if IE 7]>
<link href="<?php echo $baseUrl; ?>application/css/ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->


<!--[if gt IE 7]>
<link href="<?php echo $baseUrl; ?>application/css/ie.css" rel="stylesheet" type="text/css" />
<![endif]-->


<link href="<?php echo $baseUrl;?>application/css/global.css" rel="stylesheet" type="text/css" />
<script src="<?php echo $baseUrl;?>application/js/jquery-ui-1.8.16/js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="<?php echo $baseUrl;?>application/js/jquery-ui-1.8.16/js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<link href="<?php echo $baseUrl;?>application/js/jquery-ui-1.8.16/css/redmond/jquery-ui-1.8.16.custom.css" type="text/css" rel="stylesheet" />
<script src="<?php echo $baseUrl; ?>application/js/global.js" type="text/javascript"></script>
<script>
	$(function(){
                var eleName=["input[name='fName']","input[name='lName']","input[name='mName']","textarea[name='comment']","input[name='email']"];
                var modalObject={"attr":eleName,"hide":{"hideEle":"#message","showEle":"#formContainer"}};
                /* the instantiation of dialog modal*/
		$("#emailDialog").dialog({
                    autoOpen:false,
		    modal:true,
		    resizable:false,
                    dialogClass:"emailDialogModal",
		    width:500,
                    closeText:"close",
                    beforeClose:function(){
                        resetModal(modalObject);
                    }
                });
                // end of dialog modal
                //start of click binding
		$(".emailusBtn").click(function(){
			$("#emailDialog").dialog("open");
		});
                //end of click binding

                //start binding send button
                   $("#modalSend").click(function(){
                       var data=$("form[name=emailForm]").serializeArray();
                       var nameReg=/[^a-z?]/gi;
                       var emailReg=/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
                       var shouldSend=true;
                       for(var i in data){
                           var name=data[i].name;
                           var value=data[i].value;
                           if(name!="comment"){
                               if(/name/gi.test(name)){
                                   if(nameReg.test(value)){
                                       //this mean that there is issue with name
                                       $("input[name="+name+"]").css("border-color","red");
                                       shouldSend=false;
                                   }
                               }else{                                  
                                   //email situation
                                   if(!emailReg.test(value)){
                                      $("input[name="+name+"]").css("border-color","red");
                                      shouldSend=false;
                                   }
                               }
                           }
                       }
                       if(!shouldSend)
                           return;
                       var url=window.location.href+"/collectData"
                       $.ajax({
                           url:url,
                           data:data,
                           type:"POST",
                           success:function(data,status){
                                var container=$("<div>");
                                 var logo=$("<div class='logo modal_log'>");
                                 var message=$("<p class='statusMessage'>");
                                  $("#formContainer").hide();
                                  container.append(logo);
                                if(data=='1'){
                                   message.append("Thank you for your interest in Vevive! We will keep you update it.");
                                }else{
                                    message.append("Ooops! There is an issue saving your information");
                                }
                                container.append(message);
                                $("#message").html(container);
                                $("#message").show();
                                //resetModal(modalObject);
                           }
                       });
                   });
                //end of chaning button

                //start binding cancel button
                   $("#modalCancel").click(function(){
                       resetModal(modalObject);
                       $("#emailDialog").dialog("close");
                   });
                //end binding cancel button
	});
</script>
</head>
<body>
	<div class="splash_content">
		<div class="logo">
		</div>

            <div class="splashBox splashRight right">Keep Us Connected at:
                    <ul class="smList">
                        <li><a href="https://twitter.com/ve_vive"><div class="smBtn twitterBtn"></div></a></li>
                        <li><a href="http://www.facebook.com/pages/Vevive/347500068601996"><div class="smBtn fbookBtn"></div></a></li>
                        <li><a href="http://www.youtube.com/vevivetv"><div class="smBtn youtubeBtn"></div></a></li>
                    </ul>
                        <span>Interested? Contact Us for Info!</span>

                        <div class="emailusBtn"></div>
		</div>


		<div class="splashBox splashLeft"><p>We have a dream to <span class="logoColor">REVIVE</span> our outgoing
		personalities to go out &amp; do great fun things with great people &amp; of course great events !</p>
		<h1 class="mantra">LIFE. EVENTS. ADVENTURE.</h1>
		</div>
		
	</div>
	<div id="emailDialog" class="emailDialog">
            <div id="formContainer">
            <div class="logo modal_logo"></div>
		<form name="emailForm" action="">
                    <ul>
			<li class="listLabel"><label><span class="astrisk">*</span>First:</label></li><li><input type="text" name="fName" size="12"/></li>
                    </ul>
                    <ul>
                        <li class="listLabel"><label><span class="astrisk">*</span>Middle:</label></li><li><input type="text" name="mName" size="1" maxlength="1"/></li>
                    </ul>
                    <ul>
                        <li class="listLabel"><label><span class="astrisk">*</span>Last:</label></li><li><input type="text" name="lName" size="12"/></li>
                    </ul>
                    <ul>
                        <li class="listLabel"><span class="astrisk">*</span><label>Email:</label></li><li><input type="text" name="email"/></li>
                    </ul>
			
			<hr/>
                        <ul>
                            <li class="listLabel" ><label>Comment:</label></li>
                            <li class="textareabox"><textarea name="comment"></textarea></li>
                            
                        </ul>
                        <ul class="modal_buttonPanel">
                            <li><img src="<?php echo $baseUrl; ?>images/modal_send.png" alt="sendBtn" id="modalSend"/></li>
                            <li><img src="<?php echo $baseUrl; ?>images/modal_cancel.png" alt="cancelBtn" id="modalCancel"/></li>
                        </ul>
		</form></div>
            
            <div id="message" class="hiddenMessage">
                
            </div>
           
	</div>

</body>
</html>